<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div class="box">box标签<!-- 注释内容 --></div>

<script>

var doc = document;// 文档节点
var box = document.querySelector('.box');// 元素节点
var txt = box.firstChild;// 文本节点
var zhushi = box.lastChild;// 注释节点
var attr = box.getAttributeNode('class');// 属性节点

// console.dir( box );
// console.dir( attr );

// console.log( typeof doc );// 'object'
// console.log( typeof box );// 'object'
// console.log( typeof txt );// 'object'
// console.log( typeof zhushi );// 'object'
// console.log( typeof attr );// 'object'

// nodeType属性
// 属性值为一个整数，数值代表不同的节点类型
console.log( box.nodeType );// 1代表元素节点
console.log( attr.nodeType );// 2代表属性节点
console.log( txt.nodeType );// 3代表文本节点
console.log( zhushi.nodeType );// 8代表注释节点
console.log( doc.nodeType );// 9代表文档节点

</script>
</body>
</html>